You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This PR refactors the responsive grid layout system in the climbs list and queue components to use CSS media queries instead of Ant Design's responsive Col props. Additionally, it updates package dependencies to mark certain packages as optional dev dependencies.
Key Changes
Layout Refactoring
Created new CSS module (climbs-list.module.css) with responsive grid styling using CSS media queries instead of Ant Design's xs, sm, lg, xl props
Default: full width (100%) on small screens
lg breakpoint (992px+): 2-column layout (50% width each)
This avoids JavaScript-based breakpoint detection issues
Updated ClimbsList component to use the new CSS module for responsive column sizing
Replaced xs={24} lg={12} xl={12} with className={styles.climbCol}
Applied to both skeleton loader and actual climbs grid
Simplified QueueListItem and QueueList components by removing responsive breakpoint props
Replaced xs={6} sm={5} with span={5} (fixed width)
Replaced xs={15} sm={17} with span={17} (fixed width)
Replaced xs={3} sm={2} with span={2} (fixed width)
These components use fixed layouts that don't require responsive behavior
Dependency Updates
Updated package-lock.json to mark the following as devOptional instead of dev:
@playwright/test@1.57.0
@types/react@19.2.7
bufferutil@4.1.0
node-gyp-build@4.8.4
playwright@1.57.0
playwright-core@1.57.0
Removed dev: true flag from production dependencies:
react@19.2.3
react-dom@19.2.3
scheduler@0.27.0
Implementation Details
The CSS media query approach provides more reliable responsive behavior compared to JavaScript-based breakpoint detection, particularly for static layouts that don't need dynamic recalculation during runtime.
…e loop
Antd's Row/Col components with responsive breakpoints (xs, sm, lg, etc.)
internally use a responsiveObserver that subscribes to media query changes.
When many components use responsive breakpoints (like items in a list),
media query changes (e.g., Safari toolbar appearing/disappearing on iOS)
can trigger cascading re-renders leading to React's maximum update depth
error.
This fix:
- Replaces responsive Col props with fixed span values in queue-list.tsx,
queue-list-item.tsx, and climbs-list.tsx
- Adds CSS media queries in climbs-list.module.css for responsive 2-column
layout on larger screens
- Follows CLAUDE.md guidelines to use CSS media queries instead of
JavaScript-based breakpoint detection
https://claude.ai/code/session_018BBna6eD1vCRKfZSdK11QR
✅ Ready to merge - Minor issues noted below, but nothing blocking.
Issues
Column span math doesn't add up to 24 - queue-list-item.tsx:331-352: When item.addedByUser is truthy, columns are 5 + 15 + 2 + 2 = 24 ✓. When falsy, columns are 5 + 17 + 2 = 24 ✓. This is correct.
Responsive behavior removed without alternatives - queue-list-item.tsx and queue-list.tsx: The PR removes responsive breakpoint props (xs/sm) in favor of fixed span values. On very small screens (< 576px), the fixed spans may cause content to overflow or appear cramped compared to the previous xs={6} → span={5} adjustment. Consider whether this is intentional.
CSS module uses flexbox properties on antd Grid - climbs-list.module.css:5-7: The .climbCol class sets flex: 0 0 100% and max-width: 100%, but Ant Design's Col component already manages flex properties via its span/responsive props. Since no span is specified on the Col, this works, but mixing CSS flexbox overrides with Grid semantics could lead to confusion. Consider adding a comment clarifying this replaces antd's grid behavior.
✅ Ready to merge - Minor issues noted below, but nothing blocking.
Issues
queue-list-item.tsx:337 - Column math is inconsistent: when item.addedByUser is false, total is 5+17+2=24 ✓, but when true, total is 5+15+2+2=24 ✓. The previous code used xs={15} for no-user (15+6+3=24 in xs grid) vs xs={13} for with-user (6+13+2+3=24). The new fixed spans may display differently on extra-small screens compared to original behavior.
queue-list-item.tsx vs queue-list.tsx - Inconsistent column widths in the same row structure:
queue-list.tsx:234 uses span={17} for content column without user
queue-list-item.tsx:337 uses span={15} when addedByUser is true, span={17} when false
The suggested climbs rows (queue-list.tsx) never show user avatars, so this is correct, but should verify this is intentional layout change from the previous responsive behavior.
Notes
The PR description mentions fixing iOS Safari infinite loops from viewport size changes - this is a reasonable architectural decision to move to CSS media queries.
The package-lock.json changes removing dev: true from react/react-dom/scheduler are correct since these are runtime dependencies.
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR refactors the responsive grid layout system in the climbs list and queue components to use CSS media queries instead of Ant Design's responsive Col props. Additionally, it updates package dependencies to mark certain packages as optional dev dependencies.
Key Changes
Layout Refactoring
Created new CSS module (
climbs-list.module.css) with responsive grid styling using CSS media queries instead of Ant Design'sxs,sm,lg,xlpropsUpdated ClimbsList component to use the new CSS module for responsive column sizing
xs={24} lg={12} xl={12}withclassName={styles.climbCol}Simplified QueueListItem and QueueList components by removing responsive breakpoint props
xs={6} sm={5}withspan={5}(fixed width)xs={15} sm={17}withspan={17}(fixed width)xs={3} sm={2}withspan={2}(fixed width)Dependency Updates
Updated
package-lock.jsonto mark the following asdevOptionalinstead ofdev:@playwright/test@1.57.0@types/react@19.2.7bufferutil@4.1.0node-gyp-build@4.8.4playwright@1.57.0playwright-core@1.57.0Removed
dev: trueflag from production dependencies:react@19.2.3react-dom@19.2.3scheduler@0.27.0Implementation Details
The CSS media query approach provides more reliable responsive behavior compared to JavaScript-based breakpoint detection, particularly for static layouts that don't need dynamic recalculation during runtime.
https://claude.ai/code/session_018BBna6eD1vCRKfZSdK11QR